<template>
  <div class="home">
      <div v-for="item of carts" :key="item.id">
        <van-card :price="item.productPrice" 
          :desc="item.productInfo" 
          :title="item.productName" 
          :thumb="item.productCover">
            <div slot="footer">
              <van-checkbox v-model="item.isSelected" 
              @click="handleItem"></van-checkbox>
              <div>小计:{{item.productCount*item.productPrice | toFixed}}</div>
            </div>

            <div slot="num">
              <van-stepper v-model="item.productCount" 
              @click="onCount" />
            </div>
          </van-card>
      </div>
  <van-submit-bar
      button-text="提交订单" :price="sum(carts)">

      <van-checkbox v-model="checkAll" 
      @click="changeAll">全选</van-checkbox>
</van-submit-bar>
  </div>
</template>

<script>

export default {
  name: 'c',
  data(){
    return{
      checkAll: false,
      carts:[]
    }
  },
  filters:{
    toFixed(value) {
      return "$" + value.toFixed(2)
    }
  },
  mounted(){
    this.$http.get("/cart").then(res=>{
      // console.log(res.data)
      this.carts = res.data
    })
    this.handleItem()
    this.checkAll = true
  },
  methods:{
    remove(index) {
        this.carts.splice(index, 1)
    },
    changeAll() {
        // console.log(this.checkAll)
        // this.carts.forEach(item => item.isSelected = this.checkAll)
        this.carts.forEach(function(item){
            item.isSelected = this.checkAll
            return this.carts
        })
        
    },
    handleItem(){
        /* 根据列表项点击的结果控制全选的结果 */
        this.checkAll = this.carts.every(item=>item.isSelected)
    },
    sum(){
        // alert(1)
        var sum = 0;
        this.carts.forEach(item=>{
            sum = item["productCount"]*item["productPrice"]+sum;
        }) 
        return sum*100;
    },
    /* sum(){
        this.carts.every(function(item){
          return item.isSelected == true
        })
        var sum = 0;
        this.carts.forEach(function(item){
          item.isSelected == true
          sum =sum+(item.productPrice*item.productCount)
        })
        return sum*100
    }, */
    /* sum(val){
      if(val>0){
        var res = val.every(function(item){
          console.log(res)
          return item.isSelected == true
        })
        var sum = 0;
        res.forEach(function(item){
          sum =sum+(item.productPrice*item.productCount)
        })
        return sum*100
      }
    }, */
  }
}
</script>

<style >
</style>